<template>
	<view class="users-main">
		<!-- 头部开始 -->
		<view class="users-header-wrap">
			<view class="users-header-item" :class="{ 'users-header-item-action': 1 == usersNav }" @click="setNav(1)">出售中</view>
			<view class="users-header-item" :class="{ 'users-header-item-action': 0 == usersNav }" @click="setNav(0)">待上架</view>
			<view class="users-header-item" :class="{ 'users-header-item-action': 2 == usersNav }" @click="setNav(2)">草稿中</view>
		</view>
		<!-- 头部结束 -->

		<!-- 商品列表开始 -->
		<view v-for="(item, index) in usersList" class="users-item-wrap" @click="selectTap(item.id)">
			<!-- 头像 -->
			<image :src="item.avatar" class="users-image" />

			<view class="users-content-wrap">
				<!-- 名称 -->
				<view class="users-name">{{ item.nickName }}</view>
				<!-- 性别 -->
				<view class="users-price">性别：{{ item.sex === 0 ? '男' : '女' }}</view>
				<!-- 账号 -->
				<!-- <view class="users-price">账号 {{ item.userName }}</view> -->
				<!-- 部门 -->
				<view class="users-price">部门：{{ item.deptId }}</view>
				<!-- 手机 -->
				<view class="users-price">手机：{{ item.phonenumber }}</view>

				<view class="users-stock-wrap">
					<!-- 创建时间 -->
					<view class="users-stock">创建时间：{{ item.createTime }}</view>
					<!-- <view class="users-sell-count">销量 {{ item.userName }}</view> -->
				</view>

				<view class="users-option" @click.stop="">
					<!-- 					<view class="users-option-item" @tap="editPrice(item.id)">改价格</view>
					<view class="users-option-item" @tap="editStock(item.id)">改库存</view> -->
					<!-- 状态 -->
					<view class="users-option-item" @tap="editStatus(item.id)">
						{{ item.status === '0' ? '启用' : '禁用' }}
					</view>
					<view class="users-option-item users-option-item-action" @tap="editusers(item.id)">详情</view>
				</view>
			</view>
		</view>
		<!-- 商品列表结束 -->

		<!-- 空白页开始 -->
		<view class="users-empty-wrap" v-if="usersList.length <= 0">暂无商品</view>
		<!-- 空白页结束 -->

		<!-- 发布商品开始 -->
		<view class="publish-users-wrap">
			<view class="publish-users-btn" @click="addusers()">发布商品</view>
		</view>
		<!-- 发布商品结束 -->
	</view>
</template>

<script>
import { listUser, getUser } from '@/api/system/user';
import { getCurrentInstance } from 'vue';

export default {
	data() {
		return {
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				userName: undefined,
				phonenumber: undefined,
				status: undefined,
				deptId: undefined,
				userIds: []
			},
			usersList: [
				{
					id: 1,
					status: 1,
					stock: 999,
					count: 1,
					image: 'https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/e8f761987bebf25f31114c784d15703e.png',
					name: '【小编严选】小程序sketch ui 电商设计稿',
					price: 9.99
				},
				{
					id: 2,
					status: 1,
					stock: 999,
					count: 1,
					image: 'https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/3fa790e17aa5b21fec4c2cf490503139.png',
					name: '【小编严选】Sketch + PS WEB后台管理源文件',
					price: 9.99
				},
				{
					id: 2,
					status: 1,
					stock: 999,
					count: 1,
					image: 'https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/3fa790e17aa5b21fec4c2cf490503139.png',
					name: '【小编严选】Sketch + PS WEB后台管理源文件',
					price: 9.99
				},
				{
					id: 2,
					status: 1,
					stock: 999,
					count: 1,
					image: 'https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/3fa790e17aa5b21fec4c2cf490503139.png',
					name: '【小编严选】Sketch + PS WEB后台管理源文件',
					price: 9.99
				},
				{
					id: 2,
					status: 1,
					stock: 999,
					count: 1,
					image: 'https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/3fa790e17aa5b21fec4c2cf490503139.png',
					name: '【小编严选】Sketch + PS WEB后台管理源文件',
					price: 9.99
				},
				{
					id: 2,
					status: 1,
					stock: 999,
					count: 1,
					image: 'https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/3fa790e17aa5b21fec4c2cf490503139.png',
					name: '【小编严选】Sketch + PS WEB后台管理源文件',
					price: 9.99
				}
			],
			// 总条数
			total: 0,
			usersNav: 1,
			globalProxy: null
		};
	},
	onLoad() {
		// 进入页面，第一次执行查询用户列表
		console.log('进入页面，第一次执行查询用户列表');
		this.getList();
		// 获取当前实例
		const { proxy } = getCurrentInstance();
		this.globalProxy = proxy;
	},
	methods: {
		/** 查询用户列表 */
		getList() {
			listUser(this.queryParams).then((response) => {
				this.usersList = response.rows;
				this.total = response.total;
			});
		},

		selectTap(id) {
			console.log('tap item id:' + JSON.stringify(id));
		},
		editusers(id) {
			console.log('edit item id:' + id);
			this.globalProxy.$tab.navigateTo('/pages/user/userItem');
		},
		editStatus(id) {
			console.log('edit item id:' + id);
		},
		editPrice(id) {
			console.log('edit item id:' + id);
		},
		editStock(id) {
			console.log('edit item id:' + id);
		},
		addusers() {
			console.log('tap add new users');
		},
		setNav(usersNav) {
			this.usersNav = usersNav;
			console.log('tap set nav ' + usersNav);
		}
	}
};
</script>

<style scoped>
.users-main {
	min-height: 100vh;
	background: #f7f8fa;
	padding-top: 0rpx;
	padding-bottom: 240rpx;
}

.users-item-wrap {
	background: #ffffff;
	display: flex;
	padding: 24rpx;
	margin: 12rpx;
	border-radius: 8rpx;
}

.users-content-wrap {
	padding-left: 24rpx;
}

.users-option {
	display: flex;
}

.users-option-item {
	background: #f4f4f6;
}

.users-image {
	width: 190rpx;
	height: 200rpx;
	border-radius: 12rpx;
	flex: none;
}

.users-name {
	font-size: 32rpx;
	font-weight: bold;
}

.users-stock-wrap {
	display: flex;
	color: #969696;
	font-size: 24rpx;
	margin-top: 12rpx;
}

.users-stock {
	margin-right: 24rpx;
}

.users-price {
	font-size: 32rpx;
	/* 	color: #e7612e; */
	margin-top: 24rpx;
}

.users-option-item {
	padding: 8rpx 16rpx;
	border-radius: 36rpx;
	font-size: 24rpx;
	margin-top: 24rpx;
}

.users-option-item:not(:last-child) {
	margin-right: 24rpx;
}

.users-option-item-action {
	background: #f1f0fe;
	color: #6991ce;
}

.users-item-wrap {
	margin-top: 24rpx;
}

.users-header-wrap {
	display: flex;
	align-items: center;
	padding: 24rpx;
	background: #ffffff;
}

.users-header-item-action {
	font-size: 36rpx;
	font-color: #333333;
	font-weight: bold;
	position: relative;
}

.users-header-item-action::after {
	position: absolute;
	left: 0;
	right: 0;
	background: #4372fe;
	height: 8rpx;
	content: '';
	bottom: -12rpx;
}

.users-header-item {
	margin-right: 24rpx;
}

.publish-users-wrap {
	background: rgba(255, 255, 255, 0.5);
	padding: 24rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

.publish-users-btn {
	margin: 24rpx;
	background: #4f7df5;
	color: #ffffff;
	height: 82rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 82rpx;
}

.users-empty-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 40%;
}
</style>
